<template>
    <a-modal v-model:visible="visible" title="选择" :width="1000" @ok="tableSelectChange">
        <a-form class="smart-query-form">
            <a-row class="smart-query-form-row">
                <a-form-item label="策略名称" class="smart-query-form-item">
                    <a-input style="width: 200px" v-model:value="queryForm.name" placeholder="请输入策略名称" />
                </a-form-item>

                <a-form-item class="smart-query-form-item smart-margin-left10">
                    <a-button-group>
                        <a-button type="primary" @click="onSearch">
                            <template #icon>
                                <SearchOutlined />
                            </template>
                            查询
                        </a-button>
                        <a-button @click="resetQuery">
                            <template #icon>
                                <ReloadOutlined />
                            </template>
                            重置
                        </a-button>

                    </a-button-group>
                    <a-button type="primary" @click="tableSelectChange" style="margin-left: 10px;">
                        确定
                    </a-button>
                </a-form-item>
            </a-row>
        </a-form>
        <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="id" bordered :pagination="false"
            :showSorterTooltip="false"
            :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange,type:'radio' }" @change="onChange">
            <template #bodyCell="{ text, record, column }">
                <template v-if="column.dataIndex === 'createType'">
                    {{ column.createType == 'manual' ? '人工' : '自动' }}
                </template>
                <template v-if="column.dataIndex === 'appIconBase64'">
                    <img :src="record.appIconBase64" alt="" style="width: 40px;">
                </template>
                <template v-if="column.dataIndex === 'status'">
                    <span v-if="record.status == 1">
                        <check-circle-two-tone two-tone-color="#52c41a" />
                    </span>
                    <span v-else> </span>
                </template>
            </template>
        </a-table>
        <div class="smart-query-table-page">
            <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                :defaultPageSize="queryForm.pageSize" v-model:current="queryForm.pageNum"
                v-model:pageSize="queryForm.pageSize" :total="total" @change="ajaxQuery" @showSizeChange="ajaxQuery"
                :show-total="(total) => `共${total}条`" />
        </div>
    </a-modal>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import { configureApi } from '/@/api/system/configure-api'

const props = defineProps({
    value: [Number, Array],
});
const emit = defineEmits(['update:value'],'change');
const visible = ref(false)
const treeData = ref([])
const columns = ref([
    {
        title: '名称',
        dataIndex: 'name',
    },
    {
        title: '协议',
        dataIndex: 'protocol',
    },
    {
        title: '排序',
        dataIndex: 'sortIndex',
    },
])
const queryFormState = {
    name: "",
    description: "",
    protocol: 'OAuth_v2.0',
    pageSize: 10,
    pageNumber: 1,
    pageSizeOptions: 50
};
// 查询表单form
const queryForm = reactive({ ...queryFormState });
// 表格加载loading
const tableLoading = ref(false);
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);
// 查询
function onSearch() {
    queryForm.pageNumber = 1;
    ajaxQuery();
}
// 重置查询
function resetQuery() {
    Object.assign(queryForm, queryFormState);
    ajaxQuery();
}
function showModal() {
    visible.value = true
}
// 列表数据获取
async function ajaxQuery() {
    try {
        tableLoading.value = true;
        let responseModel = await configureApi.fetchAdapters(queryForm);
        const list = responseModel.data.rows
        total.value = responseModel.data.records;
        tableData.value = list;
    } catch (e) {
        smartSentry.captureError(e);
    } finally {
        tableLoading.value = false;
    }
}


// 选择表格行
const selectedRowKeyList = ref([]);
const records = ref([])
function onSelectChange(selectedRowKeys, record) {
    selectedRowKeyList.value = selectedRowKeys;
    records.value = record
}
function tableSelectChange() {
    emit('update:value', selectedRowKeyList.value);
    emit('change', records.value);
    visible.value = false;
}
defineExpose({
    showModal,
});
onMounted(() => {
    ajaxQuery();
});
</script>
<style scoped></style>
